import {
  Button,
  Col,
  Popconfirm,
  Popover,
  Progress,
  Row,
  Switch,
  Tooltip,
} from 'antd';
import { Fragment } from 'react';
import pageStyles from '@/common/pageLayout.less';
import {
  EditOutlined,
  PlayCircleOutlined,
  DeleteOutlined,
  StopOutlined,
  CheckCircleOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import { divide } from 'lodash';
import {
  getColorTextLoadMap,
  getTenantID,
  getUserID,
  getSelectDataMapList,
  tooltipLength,
} from '@/utils';
import { loadMdicMap } from '@/services/BaseLayout';
// import { loadMdicMap } from '@/services/BaseLayout;
const getManageFunctions = (permissions: any, operateFnc: any, record: any) => {
  let textStyle: React.CSSProperties = {
    fontSize: '.75rem',
  };
  /**
   * @description: 渲染的arr
   * @return {子元素是jsx==button按钮}
   */
  let renderArr = [];
  /**编辑按钮*/
  const detailsFunc = permissions['/notifyController/edit'] && (
    <Button
      style={textStyle}
      size={'small'}
      icon={<EyeOutlined />}
      type={'link'}
      onClick={() => {
        operateFnc?.getItem(record);
      }}
    >
      详情
    </Button>
  );
  /**编辑按钮 redactFn               */
  const EditFunc = permissions['/notifyController/edit'] &&
    record?.executeState == '0' && (
      <Fragment key={record?.id + 'EditOutlined'}>
        <Button
          style={textStyle}
          size={'small'}
          icon={<EditOutlined />}
          type={'link'}
          onClick={(e: any) => {
            e?.stopPropagation();
            operateFnc?.redactFn(record);
          }}
        >
          编辑
        </Button>
      </Fragment>
    );
  /**删除按钮*/
  const DeletFunc = permissions['/notifyController/delete'] &&
    (record?.executeState == '0' || record?.executeState == '3') && (
      <Fragment key={record?.id + 'DeleteOutlined'}>
        <Popconfirm
          title={<span style={{ fontWeight: 600 }}>确认要删除该提醒吗?</span>}
          onConfirm={(e) => {
            e?.stopPropagation();
            operateFnc?.deletFn(record);
          }}
          okType={'primary'}
        >
          <Button
            style={textStyle}
            size={'small'}
            type={'link'}
            icon={<DeleteOutlined />}
          >
            删除
          </Button>
        </Popconfirm>
      </Fragment>
    );

  /**暂停按钮*/
  const PauseFunc = permissions['/notifyController/pause'] &&
    record?.executeState == '1' && (
      <Fragment key={record?.id + 'PlayCircleOutlined'}>
        <Popconfirm
          title={<span style={{ fontWeight: 600 }}>确认要暂停该提醒吗?</span>}
          onConfirm={(e) => {
            e?.stopPropagation();
            operateFnc?.pauseFn(record);
          }}
          okType={'primary'}
        >
          <Button
            style={textStyle}
            size={'small'}
            icon={<PlayCircleOutlined />}
            type={'link'}
          >
            暂停
          </Button>
        </Popconfirm>
      </Fragment>
    );
  /**结束按钮*/
  const OverFunc = permissions['/notifyController/stop'] &&
    record?.executeState == '1' && (
      <Button
        style={textStyle}
        size={'small'}
        icon={<StopOutlined />}
        type={'link'}
        onClick={() => {
          operateFnc?.stopFn(record);
        }}
      >
        停止
      </Button>
    );

  /**恢复按钮*/
  const RecoverFunc = permissions['/notifyController/resume'] &&
    record?.executeState == '2' && (
      <Fragment key={record?.id + 'CheckCircleOutlined'}>
        <Popconfirm
          title={<span style={{ fontWeight: 600 }}>确认要恢复该提醒吗?</span>}
          onConfirm={(e) => {
            e?.stopPropagation();
            operateFnc?.reginFn(record);
          }}
          okType={'primary'}
        >
          <Button
            style={textStyle}
            size={'small'}
            icon={<CheckCircleOutlined />}
            type={'link'}
          >
            恢复
          </Button>
        </Popconfirm>
      </Fragment>
    );

  renderArr = [
    detailsFunc,
    EditFunc,
    DeletFunc,
    PauseFunc,
    OverFunc,
    RecoverFunc,
  ];
  return renderArr;
};
// 数据列展示
const getRemindManageTableColumns = (
  permissions: Record<string, any>,
  operateFnc: any,
  loadMdicMap: Record<string, any>,
) => {
  const edit = (text: number) => {
    if (text == 0) {
      return '单次提醒';
    } else if (text == 1) {
      return '多次提醒';
    } else if (text == 2) {
      return ' 复杂提醒';
    }
  };
  /**
   * @description: 获取字典的提醒类型
   * @return {"notifyTypeArr"}
   */
  let notifyTypeArr = getSelectDataMapList(
    loadMdicMap?.data?.obj?.[`${getTenantID()}1401`],
    'name',
    'id',
  );
  /**
   * @description: 处理提醒状态
   * @param {string} text 值
   * @return {判断好的文字,渲染用}
   */
  const executeStateRender = (text: string | null) => {
    let newText: string = '--';
    let newTextColor: string = '';
    if (text == '0') {
      newText = '未开启';
      newTextColor = 'rgb(245, 166, 35)';
    } else if (text == '1') {
      newText = '待执行';
      newTextColor = 'rgb(74, 144, 226)';
    } else if (text == '2') {
      newText = '执行中';
      newTextColor = 'rgb(85, 49, 194)';
    } else if (text == '3') {
      newText = '暂停';
      newTextColor = 'rgb(139, 87, 42)';
    } else if (text == '4') {
      newText = '取消';
      newTextColor = 'rgb(144, 19, 254)';
    } else if (text == '5') {
      newText = '结束';
      newTextColor = 'rgb(208, 2, 27)';
    }
    return {
      newText,
      newTextColor,
    };
  };
  const content = (item: any) => {
    return;
  };

  return [
    {
      title: '提醒类型',
      dataIndex: 'notifyTypeName',
      key: 'notifyTypeName',
      width: 120,
      visible: true,
      fixed: 'left',
      render: (text: string | null) => {
        const { color, colorText } = getColorTextLoadMap(text);
        return (
          <Tooltip>
            <span style={{ color }}>{colorText ? colorText : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '提醒内容',
      dataIndex: 'notifyContent',
      key: 'notifyContent',
      width: 180,
      visible: true,
      unDrag: true,
      render: (text: string | null) => {
        return (
          <Tooltip title={text}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 170 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '提醒方式',
      dataIndex: 'notifyStyle',
      key: 'notifyStyle',
      width: 150,
      visible: true,
      render: (text: number) => {
        return (
          <Tooltip>
            <span>{edit(text)}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '提醒情况',
      dataIndex: 'notifyCount',
      key: 'notifyCount',
      width: 270,
      visible: true,
      render: (text: number, record: any) => {
        return (
          <Tooltip>
            <Row style={{}}>
              {text ? (
                <>
                  <Col span={18}>
                    <Tooltip
                      placement="top"
                      title={`已提醒了 ${record?.notifyedCount} 次`}
                    >
                      <Progress
                        className="remind-progress"
                        percent={Math.floor(
                          (record?.notifyedCount / text) * 100,
                        )}
                        size="small"
                        // format={(percent) => text}
                      />
                    </Tooltip>
                  </Col>
                  <Col span={7}>
                    <span
                      style={{
                        // display: 'inline-block',
                        width: '10px',
                        textAlign: 'center',
                        whiteSpace: 'nowrap',
                      }}
                    ></span>
                  </Col>
                </>
              ) : (
                <>--</>
              )}
            </Row>
            {/* <Progress percent={30} /> */}
          </Tooltip>
        );
      },
      sorter: (a: any, b: any) => {
        if (a.notifyCount < b.notifyCount) {
          return -1;
        } else {
          return 1;
        }
      },
    },
    {
      title: '提醒状态',
      dataIndex: 'executeState',
      key: 'executeState',
      width: 150,
      visible: true,
      // unDrag: true,
      render: (text: string | null) => {
        const { newText, newTextColor } = executeStateRender(text);
        return (
          <>
            <span style={{ color: newTextColor }}>{newText}</span>
          </>
        );
      },
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: 150,
      visible: true,
      // unDrag: true,
      render: (text: string | null, record: any) => {
        return (
          <Tooltip>
            <span>{text ? `${text}` : '--'}</span>
          </Tooltip>
        );
      },
      sorter: (a: any, b: any) => {
        if (a.startTime < b.startTime) {
          return -1;
        } else {
          return 1;
        }
      },
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
      width: 150,
      visible: true,
      // unDrag: true,
      render: (text: string | null, record: any) => {
        return (
          <Tooltip>
            <span>{text ? `${text}` : '--'}</span>
          </Tooltip>
        );
      },
      sorter: (a: any, b: any) => {
        if (a.endTime < b.endTime) {
          return -1;
        } else {
          return 1;
        }
      },
    },
    {
      title: '最近提醒时间',
      dataIndex: 'lastTime',
      key: 'lastTime',
      width: 150,
      visible: true,
      // unDrag: true,
      render: (text: string | null) => {
        return (
          <Tooltip>
            <span>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
      sorter: (a: any, b: any) => {
        if (a.lastTime < b.lastTime) {
          return -1;
        } else {
          return 1;
        }
      },
    },
    {
      title: '同步情况',
      dataIndex: 'isSynchro',
      key: 'isSynchro',
      width: 150,
      visible: true,
      // unDrag: true,
      render: (text: number | null, record: any) => {
        return (
          <Tooltip>
            <Switch
              onChange={(e) => {
                operateFnc?.synchroFn(e, record);
                // || record?.notifyStyle !== 0
              }}
              checked={
                record?.notifyStyle === 0 ? true : text === 0 ? false : true
              }
              defaultChecked
            />
          </Tooltip>
        );
      },
    },
    {
      title: '工单编号',
      dataIndex: 'orderID',
      key: 'orderID',
      width: 150,
      visible: false,
      // unDrag: true,
      render: (text: string | null) => {
        return (
          <Tooltip>
            <span>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '工单类型',
      dataIndex: 'orderType',
      key: 'orderType',
      width: 150,
      visible: false,
      // unDrag: true,
      render: (text: string | null) => {
        return (
          <Tooltip>
            <span>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: 'cron表达式（复杂表达式）',
      dataIndex: 'cronExpression',
      key: 'cronExpression',
      width: 200,
      visible: false,
      // unDrag: true,
      render: (text: string | null) => {
        return (
          <Tooltip>
            <span>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '相关附件',
      dataIndex: 'attachUrl',
      key: 'attachUrl',
      width: 150,
      visible: false,
      // unDrag: true,
      render: (text: string | null) => {
        return (
          <Tooltip title={text}>
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 140 }}
            >
              {text ? text : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 250,
      visible: true,
      unDrag: true,
      fixed: 'right',
      render: (text: any, record: any) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {getManageFunctions(permissions, operateFnc, record)}
          </div>
        );
      },
    },
  ];
};

export { getRemindManageTableColumns };
